<template>
  <div>
    <el-dialog v-model="editVisible" width="100%" @close="handleclose">
      <el-form>
        <el-form-item>
          <el-image :src="img"></el-image>
        </el-form-item>
        <el-button
          v-if="is_download"
          type="primary"
          class="download"
          @click="handleddownload"
          >下载
        </el-button>
      </el-form>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { downloadworld } from "../assets/js/fileExport";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const is_download = ref(context.attrs.is_download);
    const img = ref(context.attrs.img);
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    const handleddownload = () => {
      let name = "电子凭证";
      downloadworld(img.value, name);
    };
    return {
      editVisible,
      img,
      is_download,
      handleclose,
      handleddownload,
    };
  },
};
</script>
<style lang="less" scoped>
  @import "../assets/css/common.less";
&:deep(.el-dialog) {
  background: none;
  box-shadow: none;
}
&:deep(.el-dialog__header){
  background-color:#01957d00 !important;
}
&:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #909399;
  background: #fff;
  width: 30px;
  height: 30px;
  border-radius: 360px;
  font-size: 30px;
}
&:deep(.el-form-item__content) {
  text-align: center;
}
.download {
  position: absolute;
  width: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #01957D;
  border-color: #01957D;
}
</style>
